<template>
    <div class="home">
        <div class="top-bg absolute h-36 -z-10 w-screen bg-gradient-to-b from-blue-500 to-white show-action"></div>
        <van-search v-model="searchField" placeholder="请输入搜索关键字" show-action shape="round" background="transparent">
            <template #left-icon>
                <van-icon name="scan" color="#1989fa" size="1.5rem" />
            </template>
            <template #right-icon>
                <van-icon name="photo-o" color="#1989fa" size="1.5rem" />
            </template>
            <template #action>
                <van-button round type="primary" text-color="#fff" plain size="small" @click="onClickButton" class="">
                    搜索
                </van-button>
            </template>
        </van-search>
        <main class="flex flex-col space-y-4">
            <header class="w-[calc(100vw-2rem)] min-h-16 min-w-48 bg-white rounded-2xl p-2 shadow-md self-center ">
                <section class="topbar flex justify-around mb-3">
                    <div class="topbar-item flex flex-col items-center" v-for="item in topBarState" :key="item.title">
                        <div class="topbar-item__icon">
                            <van-icon :name="item.icon" size="2rem" />
                        </div>
                        <div class="topbar-item__text text-xs">{{ item.title }}</div>
                    </div>
                </section>
                <van-button type="primary" block size="small" color="rgb(59, 130, 246, 0.56)">
                    <div class="text-black flex">
                        <van-icon name="apps-o" size="1rem" />
                        <span class="text-xs ml-2 font-bold">
                            所有分类
                        </span>
                    </div>
                </van-button>
            </header>
            <section class="navbar flex overflow-x-scroll w-screen space-x-4 px-4">
                <div class="navbar-item flex flex-col border rounded-lg 
                flex-[0_0_auto] w-24" v-for="item in navBarState" :key="item.title">
                    <div class="navbar-item__text text-xs p-2 pb-0">
                        {{item.title}}
                    </div>
                    <div class="navbar-item__icon self-end p-2">
                        <van-icon :name="item.icon" size="1.5rem" />
                    </div>
                </div>
            </section>
            <section>
                <ViewCard :items="ViewedState" />
            </section>
        </main>
    </div>
</template>

<script setup>
import ViewCard from '../../components/ViewCard.vue' 
import { useHomeStore } from '../../store/homeStore'
import { toRefs } from 'vue'

const homeStore = useHomeStore()
const {
    topBarState,
    navBarState, 
    ViewedState
} = toRefs(homeStore)

</script>
